<template>
  <div class="index">
    <!-- map -->
    <div class="map" id="map"></div>
    <!-- 内容 -->
    <div class="content">
      <header>
        <span>林山乡智慧应急指挥一张图</span>
        <div class="top_info">
          <div><img src="@/assets/imgs/time.png" alt="">{{currTime}}</div>
          <div><img src="@/assets/imgs/avator.png" alt="">admin</div>
        </div>
      </header>
      <section>
        <div class="left_box">
          <div class="title">{{currTitle}}</div>
          <Page1 v-show="currIndex==0"></Page1>
          <Page2 v-show="currIndex==1"></Page2>
          <Page3 v-show="currIndex==2"></Page3>
          <Page4 v-show="currIndex==3"></Page4>
        </div>
        <div class="right_menu">
          <ul>
            <li @click="toggleState(index)" class="menu_item" :class="{[item.className]:true,'active':index==currMenuIndex}" v-for="(item,index) in menuList" :key="index+'ss'">
              <span>{{item.title}}</span>
            </li>
          </ul>
          <div class="menu_dialog">
            <!-- 一张图弹窗 -->
            <div class="one_pic" v-if="currMenuIndex==0">
              <div>
                <div>
                  名称：<input type="text">
                </div>
                <div>
                  分类：<input type="text">
                </div>
                <div>
                  规模：<input type="text">
                </div>
                <button>
                  <Icon type="ios-search" />确定
                </button>
              </div>
            </div>
            <!-- 监控弹窗 -->
            <div class="auto_eye" v-if="currMenuIndex==4">
              <div class="search_box">
                <input type="text">
                <Icon type="ios-search" size="18" color="#1AA5BF" />
              </div>
              <div class="eye_box">
                <div class="top">
                  <span>&lt;&nbsp;返回</span>
                  <span class="jk">监控数<b>{{eyeList.length}}</b>个</span>
                </div>
                <div class="bottom">
                  <ul>
                    <li class="item" v-for="(item,index) in eyeList" :key="index+'ss'" @click="showJk(item)">
                      <span>{{index+1}}</span>
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yjxx_box">
          <div class="title">预警信息</div>
          <ul id="slide">
            <li class="contents" v-for="(item,index) in yjList" :key="index">{{item.title}}</li>
          </ul>
        </div>
      </section>
      <footer>
        <ul>
          <li class="f_item" @click="changePage(index,item.title)" :class="{[item.className]:true,'active':index==currIndex}" v-for="(item,index) in footerList" :key="index+'ss'">
            <span>{{item.title}}</span>
          </li>
        </ul>
      </footer>
    </div>
    <div class="boxsss jkxx">
      <Alert title="监控信息" :show.sync="showEye">
        <div>
          名称：{{eyeInfo.title || '未知'}}<br>
          编号：{{eyeInfo.num || '未知'}}<br>
          位置，{{eyeInfo.name}}<br>
        </div>
        <div class="footer">
          <button @click="prview">预览</button>
        </div>
        <div class="video_box" v-show="showVideo">
          <video id="video" width='auto' height="200" autoplay muted controls></video>
        </div>
      </Alert>
    </div>
  </div>
</template>

<script>
import { Icon } from 'view-design';
import Page1 from './com/page1.vue'
import Page2 from './com/page2.vue'
import Page3 from './com/page3.vue'
import Alert from '@/components/alert.vue'
import Page4 from './com/page4.vue'
import eyeList from '@/utils/jkList.js'// 监控列表
import videojs from "video.js";
import "videojs-contrib-hls";
import oo from '@/assets/imgs/posi.png'
export default {
  components: { Page1, Page2, Page3, Page4, Icon, Alert },
  data() {
    return {
      yjList: [
        {
          title: '两港工业区发生大量积水'
        },
        {
          title: '富邦总部大楼发生大量积水'
        }
      ],
      myVideo: {},
      markerColl: {},
      showVideo: false,
      eyeInfo: {},
      showEye: false,
      currTime: '',
      currMenuIndex: 100,
      currIndex: 0,
      currTitle: "智慧地质",
      footerList: [
        {
          title: "智慧地质",
          className: 'one'
        },
        {
          title: "智慧防汛",
          className: 'two'
        },
        {
          title: "避灾点",
          className: 'three'
        },
        {
          title: "天气预报",
          className: 'four'
        },
      ],
      menuList: [
        {
          title: '一张图',
          className: 'oneImg'
        },
        {
          title: '搜索',
          className: 'search'
        },
        {
          title: '圈选',
          className: 'select'
        },
        {
          title: '路网',
          className: 'road'
        },
        {
          title: '监控',
          className: 'autoEye'
        },
      ],
      viewer: {},
    }
  },
  computed: {
    eyeList() {
      return eyeList
    }
  },
  methods: {
    getVideo() {
      videojs(
        "video",
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
        },
        function () {
          this.play();
        }
      );
    },
    // 切换tab
    changePage(i, title) {
      if (i == this.currIndex) return
      this.showEye = false
      this.currMenuIndex = 1000
      this.currIndex = i
      this.currTitle = title
    },
    //菜单的切换
    toggleState(i) {
      if (i == this.currMenuIndex) { this.currMenuIndex = 1000; return }
      this.currMenuIndex = i

    },
    //加载地图
    startup() {
      // eslint-disable-next-line no-undef
      this.viewer = new CooGL.MapViewer('map', {
        // eslint-disable-next-line no-undef
        imageryProvider: new CooGL.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          maximumLevel: 20
        })
      });
      // eslint-disable-next-line no-undef
      this.markerColl = new CooGL.MarkerPrimitiveCollection(this.viewer.scene);
      // viewer.scene.screenSpaceCameraController.enableZoom = false;
      this.viewer.camera.flyTo({
        // eslint-disable-next-line no-undef
        destination: new CooGL.Cartesian3.fromDegrees(118.51600155, 29.17330326, 1159.977458484),
        orientation: {
          // eslint-disable-next-line no-undef
          heading: CooGL.Math.toRadians(0.0),
          // eslint-disable-next-line no-undef
          pitch: CooGL.Math.toRadians(-90.0),
          // eslint-disable-next-line no-undef
          roll: CooGL.Math.toRadians(0.0)
        }
      });
      this.setPoint({
        name: '防汛监测站',
        xy: [118.51465134, 29.17327073],
        url: 'http://113.214.1.50:7086/live/cameraid/1000012%24263/substream/1.m3u8'
      }, () => {
        this.eyeInfo = {
          name: '防汛监测站',
          xy: [118.51465134, 29.17327073],
          url: 'http://113.214.1.50:7086/live/cameraid/1000012%24263/substream/1.m3u8'
        }
        this.showEye = true
      })
      this.setPoint({
        name: '地质灾害点',
        xy: [118.51600155, 29.17330326],
        url: 'http://113.214.1.50:7086/live/cameraid/1000012%24262/substream/1.m3u8'
      }, () => {
        this.eyeInfo = {
          name: '地质灾害点',
          xy: [118.51600155, 29.17330326],
          url: 'http://113.214.1.50:7086/live/cameraid/1000012%24262/substream/1.m3u8'
        }
        this.showEye = true
      })
    },
    // 供子组件飞行定位并标注
    posiAddr(obj, cb, l = 12) {
      // 飞行
      this.viewer.camera.flyTo({
        // eslint-disable-next-line no-undef
        destination: new CooGL.Cartesian3.fromDegrees(obj.xy[0], obj.xy[1], Number(l + '00')),
        orientation: {
          // eslint-disable-next-line no-undef
          heading: CooGL.Math.toRadians(0.0),
          // eslint-disable-next-line no-undef
          pitch: CooGL.Math.toRadians(-90.0),
          // eslint-disable-next-line no-undef
          roll: CooGL.Math.toRadians(0.0)
        }
      });
      // 做标注
      var a = this.viewer.entities.values.filter(o => {
        return o.id == obj.name
      })
      if (a.length == 0) {
        // 执行标注方法
        this.setPoint(obj, cb)
      }
    },
    // 获取时间
    getTime() {
      var myDate = new Date();
      var year = myDate.getFullYear();
      var yue = myDate.getMonth() + 1;
      var ri = myDate.getDate();
      var shi = myDate.getHours();
      var fen = myDate.getMinutes();
      var miao = myDate.getSeconds()
      miao = miao < 10 ? '0' + miao : miao;
      fen = fen < 10 ? '0' + fen : fen;
      shi = shi < 10 ? '0' + shi : shi;
      this.currTime = year + '/' + yue + '/' + ri + " " + shi + ":" + fen + ":" + miao
    },
    // 显示监控弹窗
    showJk(obj) {
      if (obj.name == this.eyeInfo.name) return
      this.showEye = false
      // 飞行
      this.posiAddr(obj, () => {
        this.eyeInfo = obj
        this.showEye = true
      }, 16)
    },
    // 点击查看监控
    prview() {
      console.log(this.eyeInfo);
      this.showVideo = true
      var myPlayer = videojs("video");
      if (!this.eyeInfo.url) {
        myPlayer.src([
          {
            type: "application/x-mpegURL",
            src: '...'
          }
        ]);
      } else {
        myPlayer.src([
          {
            type: "application/x-mpegURL",
            src: this.eyeInfo.url
          }
        ]);
      }

      myPlayer.play();
    },
    // // 标注方法
    setPoint(obj, cb) {
      // eslint-disable-next-line no-undef
      let marker = new CooGL.MarkerPrimitive({
        // eslint-disable-next-line no-undef
        position: CooGL.Cartesian3.fromDegrees(obj.xy[0], obj.xy[1], 100),
        id: obj.name || obj.title,
        label: {
          text: obj.name || obj.title,
        },
        billboard: {
          image: ''
        },
        enablePolyline: false
      });
      this.markerColl.add(marker);
      this.viewer.scene.primitives.add(this.markerColl);

      var entity = this.viewer.entities.add({
        // eslint-disable-next-line no-undef
        position: CooGL.Cartesian3.fromDegrees(obj.xy[0], obj.xy[1]),
        billboard: {
          image: oo
        },
        id: obj.name || obj.title,

      });
      // eslint-disable-next-line no-undef
      var handler = new CooGL.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction((movement) => {
        var pickedObject = this.viewer.scene.pick(movement.position);
        // eslint-disable-next-line no-undef
        if (CooGL.defined(pickedObject) && (pickedObject.id === entity)) {
          // 点标注物的事件
          cb()
        } else {
          console.log('2');
        }
        // eslint-disable-next-line no-undef
      }, CooGL.ScreenSpaceEventType.LEFT_CLICK);
    },
    //预警信息滚动
    slideYj() {
      var ul = document.getElementById('slide')
      setInterval(() => {
        ul.style.cssText = "transform:translateY(-30px);transition:all .5s"
        var t = setTimeout(() => {
          ul.style.cssText = "transform:translateY(0px)"
          var a = this.yjList.splice(0, 1)
          this.yjList = this.yjList.concat(a)
          clearTimeout(t)
        }, 1000)

      }, 3000);
    }
  },

  watch: {
    showEye(news) {
      if (!news) {
        this.showVideo = false
      }
    }
  },
  mounted() {
    this.slideYj()
    this.startup()
    setInterval(() => {
      this.getTime()
    }, 1000);
    this.$nextTick(() => {
      this.getVideo()
    })
  },
}
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  background-color: #dbdbdb;
  height: 100%;
  .map,
  .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .map {
    z-index: 0;
  }
  .content {
    z-index: 1;
    pointer-events: none;

    section {
      display: flex;
      .left_box {
        pointer-events: auto;
      }
    }
  }
  header {
    position: relative;
    height: 150px;
    background: url("~@/assets/imgs/top.png") center top no-repeat;
    background-size: 100%;
    text-align: center;
    font-size: 38px;
    color: #fff;
    padding-top: 10px;
    .top_info {
      position: absolute;
      padding: 0 50px;
      top: 40px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      div {
        display: flex;
        align-items: center;
        img {
          margin-right: 10px;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .left_box {
    width: 400px;
    position: relative;
    height: 840px;
    padding: 55px 35px 20px 40px;
    margin-left: 30px;
    margin-top: -25px;
    margin-right: 20px;
    background: url("~@/assets/imgs/border1.png");
    .title {
      position: absolute;
      top: 25px;
      left: 25px;
      color: #8bf1f1;
      font-weight: bold;
    }
  }
  .right_menu {
    margin-top: -15px;
    pointer-events: auto;
    position: relative;
    .menu_item {
      width: 66px;
      height: 47px;
      cursor: pointer;
      text-align: center;
      color: #5dffd5;
      font-size: 12px;
      padding-top: 25px;
      margin-bottom: 3px;
    }
    .active {
      color: #fff;
    }
    .oneImg {
      background: url("~@/assets/imgs/icon1.png") no-repeat;
      background-size: 60px 100%;
    }
    .oneImg.active {
      background: url("~@/assets/imgs/icon1-1.png") no-repeat;
      background-size: 60px 100%;
    }
    .search {
      background: url("~@/assets/imgs/icon2.png") no-repeat;
      background-size: 60px 100%;
    }
    .search.active {
      background: url("~@/assets/imgs/icon2-1.png") no-repeat;
      background-size: 60px 100%;
    }
    .select {
      background: url("~@/assets/imgs/icon3.png") no-repeat;
      background-size: 60px 100%;
    }
    .select.active {
      background: url("~@/assets/imgs/icon3-1.png") no-repeat;
      background-size: 60px 100%;
    }
    .road {
      background: url("~@/assets/imgs/icon4.png") no-repeat;
      background-size: 60px 100%;
    }
    .road.active {
      background: url("~@/assets/imgs/icon4-1.png") no-repeat;
      background-size: 60px 100%;
    }
    .autoEye {
      background: url("~@/assets/imgs/icon5.png") no-repeat;
      background-size: 60px 100%;
    }
    .autoEye.active {
      background: url("~@/assets/imgs/icon5-1.png") no-repeat;
      background-size: 60px 100%;
    }
  }
  .yjxx_box {
    background: url("~@/assets/imgs/yjxx_bg.png") left bottom no-repeat;
    background-size: 100% 100%;
    width: 680px;
    height: 30px;
    line-height: 30px;
    margin-top: -15px;
    display: flex;
    position: relative;
    z-index: 10;
    padding-left: 17px;
    margin-left: 32px;
    overflow: hidden;
    .title {
      font-size: 18px;
      color: #0ad39b;
      font-weight: bold;
      margin-right: 20px;
    }
    .contents {
      font-size: 14px;
      line-height: 30px;
    }
  }
  .menu_dialog {
    position: absolute;
    left: 70px;
    height: 170px;
    z-index: 22;
    top: 0;

    .one_pic {
      width: 270px;
      background: rgba(13, 25, 39, 0.7);
      height: 170px;
      padding-left: 17px;
      padding: 10px;
      input {
        border-color: #41e1f0;
        outline: none;
        width: 200px;
        padding-left: 10px;
        color: #fff;
        background-color: transparent;
        margin-bottom: 10px;
      }
      button {
        width: 100px;
        transform: translateX(-50%);
        margin-left: 50%;
        text-align: center;
        font-size: 16px;
        height: 30px;
        border: 1px solid rgb(65, 225, 240);
        background-color: rgba(65, 225, 240, 0.3);
        color: #41e1f0;
        border-radius: 6px;
      }
    }
    .auto_eye {
      width: 270px;
      padding-left: 17px;
      padding: 10px;
      .search_box {
        display: flex;
        height: 30px;
        border: 1px solid #18777e;
        background: rgba(13, 25, 39, 0.7);
        align-items: center;
        padding-right: 10px;
        border-radius: 5px;
        input {
          background-color: transparent;
          flex: 1;
          border: none;
          color: #dbdbdb;
          outline: none;
          padding-left: 10px;
        }
      }
    }
    .eye_box {
      border: 1px solid #18777e;
      background: rgba(13, 25, 39, 0.7);
      padding: 10px;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        height: 25px;
        border: 1px solid #18777e;
        background-color: rgba(24, 119, 126, 0.2);
        color: #18777e;
        font-size: 12px;
        .jk {
          color: #fff;
          b {
            color: salmon;
            margin: 0 4px;
          }
        }
      }
      .bottom {
        padding: 10px 0;
        ul {
          max-height: 600px;
          overflow: auto;
        }
        .item {
          height: 30px;
          display: flex;
          cursor: pointer;

          align-items: center;
          span:first-child {
            text-align: center;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            background-color: #02c6e3;
            border-radius: 50%;
          }
        }
      }
    }
  }
  footer {
    background: url("~@/assets/imgs/footer.png") center bottom no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    display: flex;
    pointer-events: auto;
    justify-content: center;
    ul {
      width: 700px;
      display: flex;
      justify-content: space-between;
      .f_item {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 18px;
        -webkit-text-stroke: 0.5px #41e1f0;
        font-weight: bold;
        color: #fff;
      }

      .one {
        background: url("~@/assets/imgs/1-1.png") no-repeat;
        width: 191px;
        height: 77px;
        padding-left: 90px;
        padding-top: 20px;
      }
      li.active.one {
        background: url("~@/assets/imgs/1-2.png") no-repeat;
      }
      .two {
        background: url("~@/assets/imgs/2-1.png");
        width: 155px;
        padding-left: 65px;
        height: 65px;
        padding-top: 24px;
        margin-top: 12px;
      }
      li.active.two {
        background: url("~@/assets/imgs/2-2.png") no-repeat;
      }
      .three {
        background: url("~@/assets/imgs/3-1.png");
        width: 155px;
        height: 65px;
        padding-left: 70px;
        padding-top: 15px;
        margin-top: 16px;
      }
      li.active.three {
        background: url("~@/assets/imgs/3-2.png") no-repeat;
      }
      .four {
        background: url("~@/assets/imgs/4-1.png");
        width: 191px;
        padding-top: 20px;
        padding-left: 70px;
        height: 77px;
      }
      li.active.four {
        background: url("~@/assets/imgs/4-2.png") no-repeat;
      }
      li.active.f_item {
        span {
          background-image: -webkit-linear-gradient(left, #fff, #cc9d4d);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          -webkit-text-stroke: 0.5px #cc9d4d;
        }
      }
    }
  }
  .boxsss {
    .footer {
      display: flex;
      margin-top: 20px;
      justify-content: flex-end;
      button {
        cursor: pointer;
        width: 83px;
        background: url("~@/assets/imgs/yulan.png") left bottom no-repeat;
        height: 33px;
        background-size: 100% 100%;
        border: none;
        color: #5ee5ff;
        padding-left: 40px;
      }
    }
    .video_box {
      position: absolute;
      left: 101%;
      top: 0;
      img {
        width: 500px;
      }
    }
  }
}
.jkxx {
  top: 60%;
}
video {
  width: 100%;
}
/deep/.vjs-loading-spinner::after {
  opacity: 0;
}
/deep/.vjs-control-text {
  opacity: 0;
}
</style>